<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <!-- 上传图片css -->
    <!--    <link rel="stylesheet" href="../lib/upload/upload.css" media="all">-->
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-input-block {
            width: 840px;
            margin-bottom: 10px;
        }

        .uploadImg img {
            width: 200px;
            height: 158px;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">树莓派编号</label>
        <div class="layui-input-block">

            <select name="piNum" id="piNum" lay-verify="required" lay-reqtext="树莓派编号不能为空" lay-filter="">
            </select>

<!--            <select name="piNum" lay-verify="required" lay-reqtext="树莓派编号不能为空">-->
<!--                <option value="">请选择</option>-->
<!--                <option value="1">1号树莓派</option>-->
<!--                <option value="2">2号树莓派</option>-->
<!--                <option value="3">3号树莓派</option>-->
<!--            </select>-->
        </div>
    </div>
    <!--    <div class="layui-form-item">-->
    <!--        <label class="layui-form-label required">类型</label>-->
    <!--        <div class="layui-input-block">-->
    <!--            <select name="piType" lay-verify="required" lay-reqtext="类型不能为空" lay-filter="piType">-->
    <!--                <option value="1" selected>图片</option>-->
    <!--                <option value="2">文字</option>-->
    <!--            </select>-->
    <!--        </div>-->
    <!--    </div>-->


    <div class="layui-form-item">
        <label class="layui-form-label">文字内容</label>
        <div class="layui-input-block">
            <input type="text" name="wordContent" placeholder="请输入文字" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <!--    <div class="layui-form-item">-->
    <!--        <label class="layui-form-label required">上传图片</label>-->
    <!--        <div class="layui-upload layui-inline">-->
    <!--            <div class="layui-upload-list uploader-list">-->
    <!--                <div id="" class="file-iteme">-->
    <!--                    <div class="handle" id="handle1"><i class="layui-icon layui-icon-delete"></i></div>-->
    <!--                    <img class="layui-upload-img" src="" onerror="this.src='../images/img.png'" id="demo1"-->
    <!--                         style="width:150px;height:100px">-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <button type="button" class="layui-btn" id="test1" style="width:119px;">上传图片</button>-->
    <!--            <input type="hidden" id="demoText1" value="" name="picUrl"/>-->
    <!--        </div>-->
    <!--    </div>-->


    <div class="layui-form-item">
        <label class="layui-form-label required">上传图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test2">多图片上传</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list uploadImg" id="demo2"></div>
            </blockquote>
            <input type="hidden" id="demoText1" value="" name="picUrl"/>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">视频</label>
        <div class="layui-upload layui-inline">
            <input type="hidden" name="videoUrl" value="" id="resultVideo">
            <button type="button" class="layui-btn" id="test4">点击上传</button>
            <div style="color: red;font-size: 12px;margin-top: 5px">仅支持mp4格式,大小不超过500M</div>
            <input type="file" id="demoText4" style="display:none;"/>
            <div class="layui-upload-list" style="width: 352px;height: 200px;border: solid;border-color: #cccccc87;display:none;"
                 id="test8">
                <!-- <img src="../images/none.png" style="width: 100%;height: 100%"> -->
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">模板名称</label>
        <div class="layui-input-block">
            <input type="text" name="mouldName" lay-verify="required" lay-reqtext="模板名称不能为空" placeholder="请输入模板名称"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">显示方式</label>
        <div class="layui-input-block">
            <select name="displayType" lay-verify="required" lay-reqtext="显示方式不能为空">
                <option value="">请选择</option>
                <option value="0">瞬显</option>
                <option value="1">滑动</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">区域分类</label>
        <div class="layui-input-block">
            <select name="areaType" id="areaType" lay-verify="required" lay-reqtext="区域分类不能为空" lay-filter="">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">展示类型</label>
        <div class="layui-input-block">
            <select name="displayStatu" lay-verify="required" lay-reqtext="树莓派编号不能为空">
                <option value="">请选择</option>
                <option value="0">图片</option>
                <option value="1">视频</option>
            </select>
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button class="layui-btn layui-btn-normal" id="cancel">取消</button>
        </div>
    </div>

</div>
<!-- 上传图片jquery -->
<script src="../lib/upload/jquery.min.js" charset="utf-8"></script>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../js/public-config2.js" charset="utf-8"></script>
<!-- 上传图片js -->
<script src="../js/common.js" charset="utf-8"></script>
<script src="../lib/upload/jquery.upload.min.js" charset="utf-8"></script>
<script>
    $(function () {
        //初始化
        $.ajax({
            type: "POST", //提交方式
            url: "../pi_area/listNoPage",//路径
            contentType: "application/json;charset=utf-8",
            //data: JSON.stringify({"remark1": "4"}),//数据，这里使用的是Json格式进行传输
            dataType: "json",
            success: function (result) {//返回数据根据结果进行相应的处理
                if (result.code == "0" && result.data) {
                    $("#areaType").html("")
                    var html = '<option value="">请选择</option>';
                    $.each(result.data, function (index, item) {
                        // if (result_industry == item.id) {
                        //     html += '<option value="' + item.id + '" selected>' + item.typeName + '</option>';
                        // } else {
                        html += '<option value="' + item.id + '">' + item.areaName + '</option>';
                        // }
                    })
                    $("#areaType").html(html)
                } else {
                    layer.msg(result.msg);
                }
            }
        });



        //初始化
        $.ajax({
            type: "POST", //提交方式
            url: "../raspi/listNoPage",//路径
            contentType: "application/json;charset=utf-8",
            //data: JSON.stringify({"remark1": "4"}),//数据，这里使用的是Json格式进行传输
            dataType: "json",
            success: function (result) {//返回数据根据结果进行相应的处理
                if (result.code == "0" && result.data) {
                    $("#piNum").html("")
                    var html = '<option value="">请选择</option>';
                    $.each(result.data, function (index, item) {
                        // if (result_industry == item.id) {
                        //     html += '<option value="' + item.id + '" selected>' + item.typeName + '</option>';
                        // } else {
                        html += '<option value="' + item.id + '">' + item.piNum + '</option>';
                        // }
                    })
                    $("#piNum").html(html)
                } else {
                    layer.msg(result.msg);
                }
            }
        });
    })

    var shuzu = [];

    $('#test4').on("click", function () {
        $("#demoText4").trigger("click");
    });

    layui.use(['form', 'layedit', 'upload', 'tableSelect'], function () {
        var form = layui.form
            , layer = layui.layer
            , upload = layui.upload
            , $ = layui.$;


        //初始化表单，要加上，不然刷新部分组件可能会不加载
        form.render();
        var iframeIndex = parent.layer.getFrameIndex(window.name);
        //监听提交
        form.on('submit(demo1)', function (data) {
            var ss;
            for (j = 0; j < shuzu.length; j++) {
                if (j == 0) {
                    ss = shuzu[j]
                } else {
                    ss = ss + ',' + shuzu[j]
                }
            }
            //$("#demoText1").val(uploadpath + "/" + res.result);
            data.field.picUrl = ss;
            console.log(data)
            if (data.field.picUrl == '') {
                layer.msg('图片不能为空')
                return false;
            }
            $.ajax({
                type: "POST", //提交方式
                url: "../pi/insert",//路径
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data.field),//数据，这里使用的是Json格式进行传输
                dataType: "json",
                success: function (result) {//返回数据根据结果进行相应的处理
                    if (result.code == "200") {
                        var index = layer.msg("成功", {
                            time: 800 //如果不配置，默认是3秒）
                        }, function () {
                            // 关闭弹出层
                            layer.close(index);
                            parent.layer.close(iframeIndex);
                        })
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
            return false;
        });


        var a = 0;
        var loading;
        $("#demoText4").change(function (event) {
            var param = $('#demoText4').get(0).value.toString();
            if (param != "") {
                loading = layer.msg('正在上传,请稍后', {icon: 16, shade: 0.3, time: 0});
            }
            setTimeout(function () {
                a = 0;
                var params = param.split("\.");
                var name = params[0].split("\\");
                var params1 = params[params.length-1];
                if (param != "") {
                    if (params1 == "mp4" || params1 == "MP4" || params1 == "mP4" || params1 == "Mp4") {

                    } else {
                        $('#demoText4').val("");
                        layer.msg('请选择mp4文件');
                        return;
                    }
                } else {
                    $('#demoText4').val("");
                    layer.msg('请选择mp4文件');
                    return;
                }
                if (param.indexOf(" ") != -1) {
                    $('#demoText4').val("");
                    layer.msg('文件名不能有空格');
                    return;
                }
                var file = $('#demoText4').get(0).files[0];
                var size = file.size
                if (size > 500 * 1024 * 1024) {
                    $('#demoText4').val("");
                    layer.msg('视频大小不能大于500M');
                    return;
                }
                var shardSize = 2 * 1024 * 1024;                //以2MB为一个分片,每个分片的大小
                var shardCount = Math.ceil(size / shardSize);
                for (let i = 0; i < shardCount; i++) {
                    PostFile(file, i);
                }
                if (a === shardCount) {
                    var form1 = new FormData();
                    form1.append("md5", "md5");
                    form1.append("name", file.name);
                    form1.append("system", "im");
                    form1.append("type", "mp4");
                    $.ajax({
                        url: uploadpath + "/hnyfkj-file-server/common/merger",
                        type: "POST",
                        data: form1,
                        async: false, //异步
                        dataType: "json",
                        processData: false, //很重要，告诉jquery不要对form进行处理
                        contentType: false, //很重要，指定为false才能形成正确的Content-Type
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg("上传成功");
                                $("#test8").html("");
                                $("#resultVideo").val(uploadpath + "/" + res.result);
                                $("#test8").css("display","");
                                var url = uploadpath + "/" + res.result;
                                var div = '<video id="mp4s" style="height: 100%;width: 100%"  controls="controls" autobuffer="autobuffer" preload="preload" loop="loop">' +
                                    '<source  src=' + url + ' type="video/mp4" style="height: 100%;width: 100%"/>' +
                                    '</video>';
                                $("#test8").html("")
                                $("#test8").append(div);
                                layer.close(loading);
                                $('#demoText4').val("");
                            }
                        }
                    })
                }
            }, 500);
        });

        //执行分片上传
        function PostFile(file, i) {
            var name = file.name,                           //文件名
                size = file.size,                           //总大小shardSize = 2 * 1024 * 1024,
                shardSize = 2 * 1024 * 1024,                //以2MB为一个分片,每个分片的大小
                shardCount = Math.ceil(size / shardSize);   //总片数
            if (i >= shardCount) {
                return;
            }
            var start = i * shardSize;
            var end = start + shardSize;
            var packet = file.slice(start, end);  //将文件进行切片
            /*  构建form表单进行提交  */
            var form = new FormData();
            form.append("file", packet); //slice方法用于切出文件的一部分
            form.append("name", name);
            form.append("size", size);
            if (shardCount === i + 1) {
                shardSize = size - i * shardSize
            }
            form.append("shardSize", shardSize);
            form.append("system", "im");
            form.append("type", "mp4");
            form.append("md5", "md5");
            form.append("chunks", shardCount); //总片数
            form.append("chunk", i + 1); //当前是第几片
            $.ajax({
                url: uploadpath + "/hnyfkj-file-server/common/upload",
                type: "POST",
                data: form,
                //timeout:"10000",  //超时10秒
                async: false, //异步
                dataType: "json",
                processData: false, //很重要，告诉jquery不要对form进行处理
                contentType: false, //很重要，指定为false才能形成正确的Content-Type
                success: function (msg) {
                    console.log(msg);
                    /*  表示上一块文件上传成功，继续下一次  */
                    if (msg.code === 200) {
                        console.log("上传成功");
                        a++
                    }
                }
            })
        };




        //多图片上传
        upload.render({
            elem: '#test2'
            , url: uploadpath + 'hnyfkj-file-server/common/upload'  //改成您自己的上传接口
            , multiple: true
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                });
            }
            , done: function (res) {
                //上传完毕
                shuzu.push(uploadpath + "/" + res.result)
            }
        });

        //退出
        $('#cancel').on("click", function () {
            parent.layer.close(iframeIndex);
        });


        //图片上传上传
        var uploadInst = upload.render({
            elem: '#test1'
            , accept: 'images' //普通文件
            , url: uploadpath + 'hnyfkj-file-server/common/upload' //改成您自己的上传接口
            , before: function (obj) {
                loading = layer.msg('正在上传,请稍后', {icon: 16, shade: 0.3, time: 0});
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , choose: function (obj) {
                var param = $('input[name="file"]')[0].value.toString();
                var params = param.split("\.");
                var name = params[0].split("\\");
                var iname = name[name.length - 1].replace(/,/, "");
                this.data = {
                    name: name[name.length - 1].replace(/,/, ""),
                    type: "." + params[params.length - 1],
                    system: "im"
                }
                console.log(this.data);
            }
            , data: {}
            , done: function (res) {
                layer.close(loading);
                //如果上传失败
                $("#demoText1").val(uploadpath + "/" + res.result);
                if (res.code != 200) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText1');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>
</body>
</html>